$activeColor:#40e0d0;
.checkbox-label {
   display: inline-flex;
   font-size: 26px;
   margin-right: 16px;
 }

.checkbox {
   -webkit-appearance: none;
   -moz-appearance: none;
   -ms-appearance: none;
   -o-appearance: none;
   appearance: none;

   width: 40px;
   height: 40px;
   -webkit-transition: all 0.15s ease-out 0;
   -moz-transition: all 0.15s ease-out 0;
   transition: all 0.15s ease-out 0;
   background: #fff;
   border: 1PX solid #000;
   color: #fff;
   cursor: pointer;
   display: inline-block;
   outline: none;
   margin-right: 0.2rem;
   z-index: 1000;
  &:checked {
    background: $activeColor;
    border: none;
  }

  &:checked::before {
    width: 40px;
    height: 40px;
    position: absolute;
    content: '\2716';
    display: inline-block;
    font-size: 25px;
    text-align: center;
    line-height: 40px;
  }

  &:checked::after {
    -webkit-animation: click-wave 0.65s;
    -moz-animation: click-wave 0.65s;
    animation: click-wave 0.65s;
    background: $activeColor;
    content: '';
    display: block;
    z-index: 100;
  }
}

.checkbox-sure{
  &:checked::before{
    content: '\2716';
  }
}

.checkbox-cancel{
  &:checked::before{
    content: '\2714';
  }
}
